<!-- 更多课程 -->
<template>
	<view class="content">
		<view class="topbox">
			<swiper v-if="cate.carouselImg" class="swiper" circular indicator-dots :autoplay="autoplay"
				:interval="interval" :duration="duration" indicator-color="rgba(255,255,255,.3)"
				indicator-active-color="#ffffff">
				<swiper-item class="swiper-item" v-for="(ban, ids) in cate.banner" :key="ids">
					<image :src="ban" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="adv" v-if="cate.coverImg">
				<image :src="cate.coverImg"></image>
			</view>
		</view>
		<!-- 课程类别导航 -->
		<u-scroll-list class="navgaitionBox">
			<view class="navgaition_box" v-for="(item, index) in cate.typeTwoList" :key="index" @click="clickTwo(item)">
				<view class="icon" :style="{
					backgroundImage:'url('+item.icon+')'
				}">
				</view>
				<view class="text">{{ item.title }}</view>
			</view>
		</u-scroll-list>
		<!-- 列表 -->
		<view class="series">
			<view class="name_txt">{{twoTitle}}</view>
			<view class="main">
				<view class="list" v-if="seriesList.length">
					<list v-for="(item,index) in seriesList" :key='index' :item="item" @clickItem="goCourseList">
					</list>
					<u-loadmore :status="status"></u-loadmore>
				</view>
				<u-empty v-else mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		courseCategory,
		courseCateDetail,
		courseSeries
	} from '@/apis/apis.js';
	import list from '../modules/list.vue'
	export default {
		components: {
			list
		},
		data() {
			return {
				id: '', //课程一级分类id
				cate: [], //二级分类
				seriesList: [], //系列列表
				twoId: '',
				twoTitle: '',
				courseList: [],
				autoplay: true,
				interval: 2000,
				duration: 500,
				pageNum: 1, //页数
				pageSize: 10, //一页的条数
				status: 'nomore',
				title: "",
			};
		},
		onLoad(options) {
			this.title = options.title
			this.$forceUpdate()
			// 课程一级id
			this.id = options.id ? options.id : '';
			console.log(this.id)
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.title
			})
		},
		onShow() {
			this.pageNum = 1
			this.init()
			console.log("变化执行")
		},
		methods: {
			// 二级分类
			async init() {
				const res = await courseCategory();
				if (this.id) {
					const idx = res.data.findIndex(el => el.id == this.id);
					if (res.data[idx].carouselImg) {
						// 轮播图
						res.data[idx].banner = res.data[idx].carouselImg.split(',');
					}
					this.cate = res.data[idx];
					console.log('二级分类', this.cate)
					this.twoId = this.cate.typeTwoList[0].id
					this.twoTitle = this.cate.typeTwoList[0].title
					// this.$nextTick(() => {
					this.seriesList = []
					this.getSeriesList()
					// })
				}

			},
			// 系列列表
			async getSeriesList() {
				const res = await courseSeries({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					courseClassify: this.id,
					courseClassifyTwo: this.twoId,
				})
				this.seriesList = this.seriesList.concat(res.data);
				console.log(this.seriesList, this.pageNum, this.pageSize)
				if (res.data.length < this.pageSize) {
					this.status = 'nomore';
				} else {
					this.status = 'loadmore';
				}
				if (this.seriesList.length == 0) this.status = 'loadmore'
			},
			//跳转系列课程
			goCourseList(v) {
				console.log(v)
				if (!v.resourcesNum) return this.$u.toast('暂无课程')
				uni.navigateTo({
					url: `../courseList/courseList?seriesId=${v.id}`
				})
			},
			// 跳转到
			clickTwo(v) {
				this.twoTitle = v.title
				this.twoId = v.id
				this.seriesList = []
				this.pageNum = 1
				this.getSeriesList()
				console.log(this.seriesList, '执行到这')
			},
			// 拉到底
			onReachBottom() {
				if (this.status != "nomore") {
					this.timer = setTimeout(() => {
						this.pageNum++
						this.getSeriesList()
						console.log('执行了这一句')
					})
				}
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.init()
				uni.stopPullDownRefresh()
			}, 1500)
		}
	};
</script>

<style scoped lang="scss">
	.flex {
		display: flex;
	}

	.justify-between {
		justify-content: space-between;
	}

	.align-center {
		align-items: center;
	}

	.content {
		width: 100%;
		min-height: calc(100vh - var(--status-bar-height));
		background-color: #f8f8f8;

		.topbox {
			width: 92%;
			margin: 0 auto;

			.swiper {
				width: 100%;
				height: 340rpx;
				border-radius: 20rpx;
				overflow: hidden;

				.swiper-item {
					border-radius: 20rpx;

					&>image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.adv {
				width: 100%;
				height: 649rpx;
				margin-top: 36rpx;

				&>image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.navgaitionBox {
			display: flex;
			width: 100%;
			padding: 25rpx 0;
			// padding-right: 20rpx;
			overflow-x: scroll;

			.navgaition_box {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 131rpx;
				margin: 0 20rpx;

				.icon {
					width: 131rpx;
					height: 132rpx;
					border-radius: 50%;
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center;
				}

				.text {
					margin-top: 4rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #363636;
				}
			}
		}
	}

	.series {
		padding: 30rpx;
		overflow: hidden;

		.name_txt {
			color: #303030;
			font-size: 34rpx;
			font-weight: 700;
			padding: 30rpx 0;
		}

		.main {
			min-height: 100rpx;

			.list {
				width: 100%;
			}
		}
	}
</style>
